<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="../css/login_style.css">
    <script type="text/javascript" src="../js/commons.js"></script>
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<form onsubmit="return login()" method="post">
    <div class="login_div">
        <h2>用户登录</h2>
        <div class="login_box">
            <input type="text" name="username" id="username" autocomplete="off" required="required"/>
            <label for="username">请输入手机号码</label>
        </div>
        <div class="login_box">
            <input type="password" name="password" id="password" autocomplete="off" required="required"/>
            <label for="password">请输入密码</label>
        </div>
        <div class="login_box">
            <input type="code" name="code" id="code" autocomplete="off" required="required"/>
            <label for="code">请输入图形验证码</label>
        </div>
        <div class="login_box">
            <img src="" onclick="changeImage()" alt=" " class="code_img" oncontextmenu="return false"><br>
        </div>

        <input type="submit" class="login" value="登录">
        <a href="change_pwd.html" id="to_password">忘记密码</a>
        <a href="reg.html" target="_self" id="to_reg">点击注册</a>
    </div>
</form>
<script>
    // 登录校验
    function login (){
        let params = {};
        let serializeArray = $("form").serializeArray();
        $.each(serializeArray,function (index, ele){
            params[ele.name] = ele.value;
        });

        $.ajax({
            url: URL + "user/userLogin",
            type: "post",
            data: params,
            headers: {"token":localStorage.getItem("token")},
            success: function (result,status,xmlhttp){
                if (result.code === 0){
                    localStorage.setItem("token",xmlhttp.getResponseHeader("token"));
                    // alert(result.msg);
                    window.location.href = "main.html";
                } else {
                    alert(result.msg);
                }
            }
        });
        return false;
    }

    function changeImage (){
        $.ajax({
            url: URL + "user/vailCode",
            success: function (result,status,xmlhttp){
                let key = xmlhttp.getResponseHeader("token");
                localStorage.setItem("token",key);
                $(".code_img").prop("src",result.data);
            }
        })
    }

    changeImage();
</script>
</body>
</html>